<template>
    <div class="flex-1 login-bg">
        <div
            class="fixed -translate-y-1/2 top-1/2 right-[160px] w-[540px] h-[670px] px-[45px] box-border py-[50px] bg-white bg-opacity-75 rounded-[40px] flex flex-col transition-opacity">
            <div class="flex flex-col mb-[25px]">
                <span class="font-medium text-[55px]">你好</span>
                <span>欢迎使用<span class="ml-2 text-main-green">电影推荐平台</span></span>
            </div>
            <div class="relative flex-1 overflow-hidden">
                <el-form ref="loginFormRef" :model="formData" label-position="top" hide-required-asterisk
                    class="absolute w-full transition-transform">
                    <el-form-item label="账号" :rules="rules.username" prop="username">
                        <el-input class="input-box" v-model="formData.username" placeholder="请输入账号信息（用户名/手机号）" />
                    </el-form-item>
                    <el-form-item label="密码" :rules="rules.password" prop="password">
                        <el-input class="input-box" v-model="formData.password" placeholder="请输入密码" type="password"
                            show-password />
                    </el-form-item>
                    <div class="flex items-center justify-between">
                        <el-checkbox v-model="isRemember">记住密码</el-checkbox>
                        <el-button text type="primary" @click="openRegister">注册</el-button>
                    </div>
                    <div class="flex justify-end mt-[60px]">
                        <el-button class="w-60 h-14 rounded-[10px]" type="primary" @click="submitForm">登录</el-button>
                    </div>
                </el-form>
            </div>
        </div>
        <CustomDialog v-model:show="addDialog" title="注册" width="600px" @cancel="cancelDialog" @confirm="submitAddForm">
            <el-form ref="formRef" :model="userForm" label-width="auto">
                <el-form-item label="用户名称" prop="username">
                    <el-input v-model="userForm.username"></el-input>
                </el-form-item>
                <el-form-item label="用户密码" prop="password">
                    <el-input v-model="userForm.password"></el-input>
                </el-form-item>
                <el-form-item label="用户姓名" prop="name">
                    <el-input v-model="userForm.name"></el-input>
                </el-form-item>
                <el-form-item label="用户头像" prop="headUrl">
                    <SingleUpload v-model="userForm.headUrl"></SingleUpload>
                </el-form-item>
            </el-form>
        </CustomDialog>
    </div>
</template>

<script setup lang="ts">
import { getMyDetail, login } from '@/apis/system'
import { onMounted, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { type FormInstance } from 'element-plus'
import { rememberPwd, getRemember, clearRemember, setToken, setUserInfo, getUserInfo } from '@/utils/store'
import { registerUser } from '@/apis/system'
import CustomDialog from '@/components/CustomDialog.vue'
import SingleUpload from '@/components/SingleUpload.vue'

const route = useRoute()
const router = useRouter()
// 登录表单
const loginFormRef = ref<FormInstance>()
const formData = reactive<LoginForm>({
    username: '',
    password: ''
})

// 输入校验
const rules = {
    username: [
        {
            required: true,
            message: '账号不能为空',
            trigger: 'blur'
        }
    ],
    password: [
        {
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
        }
    ]
}

// 是否记住密码
const isRemember = ref(!!getRemember())

watch(
    () => isRemember.value,
    () => {
        if (isRemember.value) {
        } else {
            clearRemember()
        }
    }
)

onMounted(() => {
    // 记住密码内容
    const rememberInfo = getRemember()
    formData.username = rememberInfo?.username || ''
    formData.password = rememberInfo?.password || ''
})
// 登录表单提交
const submitForm = async () => {
    loginFormRef.value?.validate(async (valid) => {
        if (valid) {
            const res = await login(formData)
            console.log(res)

            setToken(res.tokenValue)
            if (isRemember.value) {
                rememberPwd(formData.username, formData.password)
            }
            const userInfo = await getMyDetail()
            setUserInfo(userInfo)
            jump()
        }
    })
}
const jump = () => {
    console.log(getUserInfo()?.roleCode);

    if (getUserInfo()?.roleCode === 'USER') {
        console.log('zzzzzzzzzzzz');

        router.replace({ path: '/home/shop' })
    } else if (getUserInfo()?.roleCode === 'ADMIN') {
        router.replace({ path: '/user/list' })
    }
}

const addDialog = ref(false)
const openRegister = () => {
    addDialog.value = true
}

const cancelDialog = () => {
    addDialog.value = false
}
const userForm = reactive({
    username: '',
    password: '',
    name: '',
    headUrl: '',
})
const submitAddForm = async () => {
    await registerUser(userForm)
    addDialog.value = false
}
</script>

<style scoped>
/* 图片已转为渐进模式，会自动模糊加载。 */
.login-bg {
    background: url('../assets/bg-login.jpeg') no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

.active-line {
    transition: left 0.36s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.input-box {
    @apply h-14 rounded-lg;
}

:deep(.el-form-item__label) {
    @apply text-black text-lg !mb-[15px];
}
</style>
